
<template>

  <div class="summary-container">
    <el-row :gutter="30">
      <el-col :xs="24" :sm="24" :md="24" :lg="12">
        <div class="picture-gallary">
          <div class="current-preview">
            <img src="https://via.placeholder.com/368x368" alt="">
          </div>
          <div>
            <ul class="thumb-pic-list">
              <li>
                <div class="thumb-pic">
                  <img src="https://via.placeholder.com/65x65" alt="">
                </div>
              </li>
              <li>
                <div class="thumb-pic">
                  <img src="https://via.placeholder.com/65x65" alt="">
                </div>
              </li>
              <li>
                <div class="thumb-pic">
                  <img src="https://via.placeholder.com/65x65" alt="">
                </div>
              </li>
              <li>
                <div class="thumb-pic">
                  <img src="https://via.placeholder.com/65x65" alt="">
                </div>
              </li>
              <li>
                <div class="thumb-pic">
                  <img src="https://via.placeholder.com/65x65" alt="">
                </div>
              </li>
              <li>
                <div class="thumb-pic">
                  <img src="https://via.placeholder.com/65x65" alt="">
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>

      <el-col :xs="24" :sm="24" :md="24" :lg="12">
        <header class="product-intro-header">
          <h3 class="sku-name">DH-DAC-HFW2100M-12</h3>
          <div class="sku-desc">HDCVI同轴高清100万像素M型80米红外双灯枪</div>
        </header>
        <div class="intro-feature">
          <p>> starlight,120dB True WDR,3DNR</p>
          <p>> starlight,120dB True WDR,3DNR</p>
          <p>> starlight,120dB True WDR,3DNR</p>
          <p>> starlight,120dB True WDR,3DNR</p>
          <p>> starlight,120dB True WDR,3DNR</p>
          <p>> starlight,120dB True WDR,3DNR</p>
          <p>> starlight,120dB True WDR,3DNR</p>
        </div>
      </el-col>

    </el-row>
    <a href="/" class="text-info edit-link">编辑产品详情</a>
  </div>
</template>

<script>

  export default {
    components: {

    },
    method: {
      show() {

      }
    }
  }
</script>

<style scoped>

  .summary-container {
    position: relative;
    margin-bottom: 50px;
  }

  .picture-gallary {
    width: 368px;
    margin: 0 auto;
  }

  .edit-link {
    position: absolute;
    top: 0px;
    right: 0px;
    display: inline-block;
    width: calc(1em + 18px);
    text-decoration: none;
    border: 1px solid;
    padding: 8px;
    border-radius: 4px;
  }

  .current-preview {
    width: 368px;
    height: 368px;
    margin-bottom: 12px;
    border: 1px solid #dcdcdc;
  }

  .current-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .thumb-pic-list {
    width: 368px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .thumb-pic {
    width: 65px;
    height: 65px;
    margin-bottom: 12px;
    border: 1px solid #dcdcdc;
  }

  .thumb-pic:hover {
    border-color: #d9271b;
  }

  .thumb-pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-intro-header {
    margin-bottom: 35px;
    margin-right: 35px;
  }

  .product-intro-header .sku-name {
    margin: 15px 0;
    color: #333;
    font-size: 30px;
    font-weight: normal;
  }

  .product-intro-header .sku-desc {
    color: #666;
    font-size: 18px;
  }

  .intro-feature {
    padding: 4px 20px;
    background: #f5f5f5;
  }


</style>

